<template>
    <div class="main1">
        <div class="ml">
            <Cl1 :infoData="infoData" />
            <Cl2 :infoData="infoData" />
        </div>
        <div class="mlc">
            <Cl3 :infoData="infoData" />
            <Cl4 :infoData="infoData" />
            <Cl5 :infoData="infoData" />
        </div>
        <div class="ml">
            <Cl6 :infoData="infoData" />
            <Cl7 :infoData="infoData" />
            <Cl8 :infoData="infoData" />
        </div>
    </div>
</template>

<script>
import Cl1 from './1.vue'
import Cl2 from './2.vue'
import Cl3 from './3.vue'
import Cl4 from './4.vue'
import Cl5 from './5.vue'
import Cl6 from './6.vue'
import Cl7 from './7.vue'
import Cl8 from './8.vue'
export default {
    components: { Cl1, Cl2, Cl3, Cl4, Cl5, Cl6, Cl7, Cl8 },
    props: ['infoData'],
    data() {
        return {
        }
    },
    mounted() {

    },
    methods: {

    }

}
</script>

<style lang="scss" scoped>
.main1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -15px;

    .ml {}

}
</style>